<!--  -->
<template>
  <div class="welcome-guide" v-if="dialogVisible">
    <div class="guide-w guide-w1 animated fadeInLeft" v-if="shownum === 1">
      <img :src="guidewordsimg1"/>
      <div class="btn-w" @click="shownum = 2"></div>
    </div>
    <div class="guide-w guide-w2 animated fadeInRight" v-if="shownum === 2">
      <img :src="guidewordsimg2"/>
      <div class="btn-w" @click="shownum = 3"></div>
    </div>
    <div class="guide-w guide-w3 animated fadeInRight" v-if="shownum === 3">
      <img :src="guidewordsimg3"/>
      <div class="btn-w" @click="shownum = 4"></div>
    </div>
    <div class="guide-w guide-w4 animated fadeInUp" v-if="shownum === 4">
      <img :src="guidewordsimg4"/>
      <div class="btn-w" @click="shownum5"></div>
    </div>
    <div class="guide-w guide-w5 animated fadeInUp" v-if="shownum === 5">
      <img :src="guidewordsimg5"/>
      <div class="btn-w" @click="shownum = 6"></div>
    </div>
    <div class="guide-w guide-w6 animated fadeInUp" v-if="shownum === 6">
      <img :src="guidewordsimg6"/>
      <div class="btn-w" @click="shownum7"></div>
    </div>
    <div class="guide-w guide-w7 animated fadeInRight" v-if="shownum === 7">
      <img :src="guidewordsimg7"/>
      <div class="btn-w" @click="close"></div>
    </div>
    <div class="close-u" @click="close"></div>
    <div class="mask-g"></div>
  </div>
</template>

<script>
import guidewordsimg1 from '@/assets/images/guideimg/guidewords1.png'
import guidewordsimg2 from '@/assets/images/guideimg/guidewords2.png'
import guidewordsimg3 from '@/assets/images/guideimg/guidewords3.png'
import guidewordsimg4 from '@/assets/images/guideimg/guidewords4.png'
import guidewordsimg5 from '@/assets/images/guideimg/guidewords5.png'
import guidewordsimg6 from '@/assets/images/guideimg/guidewords6.png'
import guidewordsimg7 from '@/assets/images/guideimg/guidewords7.png'
import PubSub from 'pubsub-js'
import * as PubsubType from '@/config/pubsubtype.js'
export default {
  data () {
    return {
      dialogVisible: false,
      shownum: 1,
      guidewordsimg1: guidewordsimg1,
      guidewordsimg2: guidewordsimg2,
      guidewordsimg3: guidewordsimg3,
      guidewordsimg4: guidewordsimg4,
      guidewordsimg5: guidewordsimg5,
      guidewordsimg6: guidewordsimg6,
      guidewordsimg7: guidewordsimg7
    }
  },
  methods: {
    show () {
      this.dialogVisible = true
      this.shownum = 1
    },
    close () {
      this.dialogVisible = false
    },
    shownum5 () {
      if (window.innerHeight < 760) {
        PubSub.publish(PubsubType.PUBSUB_BACKEND_MAIN_SCROLL_TOTOP, -1)
      }
      this.shownum = 5
    },
    shownum7 () {
      if (window.innerHeight < 760) {
        PubSub.publish(PubsubType.PUBSUB_BACKEND_MAIN_SCROLL_TOTOP, 0)
      }
      this.shownum = 7
    }
  }
}

</script>
<style scoped lang="scss">
.mask-g{
  background: rgba(0,0,0,0.4);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
}
.close-u{
  position: fixed;
  top: 25px;
  right: 50px;
  width: 30px;
  height: 30px;
  z-index: 10000;
  background: url(~@/assets/images/guideimg/close.png) no-repeat center;
  cursor: pointer;
}
.guide-w {
  position: fixed;
  z-index: 10000;
  img{
    max-width:100%;
    max-height: 100%;
  }
  .btn-w{
    position: absolute;
    width: 250px;
    height: 100px;
    cursor: pointer;
  }
}
.guide-w1 {
  top: 132px;
  left: 205px;
  max-width: 80%;
  img{
    max-height: calc(100vh - 145px);
  }
  .btn-w{
   right: 11%;
   bottom: 0;
  }
}
.guide-w2 {
  top: 212px;
  right: -1px;
  max-width: 80%;
  img{
    max-height: 550px;
    }
  .btn-w{
   left: 5%;
   top: 44%;
  }
}
.guide-w3 {
  top: 222px;
  right: -1px;
  max-width: 92%;
  img{
    max-height: 540px;
    }
  .btn-w{
   left: 14%;
   top: 56%;
  }
}
.guide-w4 {
  top: 128px;
  right: -1px;
  max-width: calc(100% - 150px);
  img{
    max-height: 640px;
    }
  .btn-w{
   left: 51%;
   top: 0;
  }
}
.guide-w5 {
  top: 285px;
  right: calc(50% - 111px);
  width: 496px;
  margin-right: -110px;
  .btn-w{
   left: 115px;
   top: 0;
  }
}
.guide-w6 {
  top: 305px;
  left: calc(50% - 111px);
  max-width:90%;
  margin-left: -402px;
  .btn-w{
   right: 10%;
   top: 27%;
  }
}
.guide-w7 {
  top: 132px;
  right: 10px;
  max-width:70%;
  img{
    max-height: calc(100vh - 145px);
  }
  .btn-w{
   left: 8%;
   bottom: 4%;
   width: 280px;
  }
}
@media (max-height:760px){
  .guide-w5{
    top: auto;
    bottom: -18px;
  }
  .guide-w6{
    top: auto;
    bottom: -10px;
  }
}
</style>
